<script setup lang="ts">
/**
 * @desc TaskNode
 * @author MiyueFE <https://github.com/miyuesc>
 * @since 2024/7/12 上午10:06
 */

import type { PropType } from 'vue'
import { computed } from 'vue'
import { UserCog } from 'lucide-vue-next'
import type { FlowDirection, TaskNode } from '@/types'

defineOptions({ name: 'TaskNode' })

const $props = defineProps({
  data: {
    type: Object as PropType<TaskNode>,
    required: true,
  },
  direction: {
    type: String as PropType<FlowDirection>,
    default: 'vertical',
    validator: (v: FlowDirection) => ['vertical', 'horizontal'].includes(v),
  },
})
defineEmits(['update:data'])

const info = computed<string>(() => {
  const { approvalObject, candidateUsers, candidateGroups } = $props.data.businessData
  if (approvalObject === 1) {
    return '发起人'
  }
  else if (approvalObject === 2) {
    return `指定人: ${(candidateUsers as any[])?.map(i => i.name).join(', ') || '无'}`
  }
  else if (approvalObject === 3) {
    return `指定角色: ${(candidateGroups as any[])?.map(i => i.name).join(', ') || '无'}`
  }
  else {
    return ''
  }
})
</script>

<template>
  <div class="flow-node flow-task">
    <div class="flow-node_header">
      <UserCog :size="16" /><span>{{ data.name }}</span>
    </div>
    <div class="flow-node_content">
      {{ info }}
    </div>
  </div>
</template>
